<template>
	<view class="index info">
		<view class="info-cell info-cell-8" @click="onChoose">
			<view class="info-cell-label">头像</view>
			<view class="info-cell-right">
				<image
					class="info-cell-avatar"
					:src="userInfo.avatar"
					mode="widthFix"
				></image>
				<uni-icons type="right" size="26" color="#999"></uni-icons>
			</view>
		</view>
		<view class="info-cell" @click="onEdit('nickname', '昵称')">
			<view class="info-cell-label">昵称</view>
			<view class="info-cell-right">
				{{ userInfo.nickname }}
				<uni-icons type="right" size="26" color="#999"></uni-icons>
			</view>
		</view>
		<view class="info-cell" @click="onEdit('email', '邮箱')">
			<view class="info-cell-label">邮箱</view>
			<view class="info-cell-right">
				{{ userInfo.email }}
				<uni-icons type="right" size="26" color="#999"></uni-icons>
			</view>
		</view>
		<view class="info-btn">
			<button
				type="primary"
				style="width: 100%; margin: 0; background-color: #c12c1f"
				@click="onExit"
			>
				退出
			</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { baseUrl } from '../../../config/index.js'
import { update } from '../../../api/user/index.js'
import { toast } from '../../../utils/native/index.js'
export default {
	data() {
		return {}
	},

	computed: {
		...mapState('user', ['userInfo'])
	},

	methods: {
		...mapMutations('user', ['setUserInfo']),

		onChoose() {
			const token = uni.getStorageSync('token')
			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths
					uni.uploadFile({
						url: baseUrl + '/uploadPic',
						filePath: tempFilePaths[0],
						header: { token },
						name: 'file',
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data)
							const data = JSON.parse(uploadFileRes.data)
							if (data?.msg?.code === 200) {
								update({
									username: this.userInfo.username,
									avatar: data.data
								}).then((data) => {
									this.setUserInfo(data)
								})
							} else {
								toast(data?.msg?.message)
							}
						}
					})
				}
			})
		},

		onEdit(key, label) {
			uni.navigateTo({
				url: `/pages/mine/info/edit/edit?key=${key}&label=${label}`
			})
		},

		onExit() {
			uni.clearStorageSync()
			this.setUserInfo({
				avatar: 'https://sslapi.qiyacloud.com/upload/user.png',
				nickname: '',
				email: ''
			})
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.info {
	width: 100vw;
	padding: 0;
	background-color: #f5f5f5;

	&-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		background-color: white;

		&-8 {
			padding: 8px 16px;
		}

		&-avatar {
			width: 60px;
			border-radius: 8px;
		}

		&-label {
			width: 60px;
		}

		&-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #999;
			word-break: break-all;
		}
	}

	&-cell + &-cell {
		border-top: 1px solid #eee;
	}

	&-btn {
		padding: 0 16px;
		margin-top: 16px;
	}
}
</style>
